<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="../masterpage/masterpage.xhtml">
	<ui:define name="title">Accueil</ui:define>
	<ui:define name="content">			
		<h:head>	
		<h:body>
			<f:view>
				<h2 style="margin-left:1%;text-transform: uppercase;color: #001385;"><img src="../../www/images/icones/icon_SoraFlag.png" alt="Jeux les plus populaires" />Jeux les plus populaires</h2>														
					<h:dataTable value="#{homeMB.listeJeuxPopulaire}"
						var="pdt" border="0"  style="width:100%">
						<h:column>
						<div class="fond" style="width:98%;margin-left:1%;">
						<h:form>
							<table style="width:100%">
								<tr  style="text-transform: uppercase; font-weight:bold; color:#008580;">
									<td rowspan="2"><img style="border: 1px solid #000;" src="#{pdt.jeu.imgMinJeu}"/></td>
									<td style="width: 150px;">Genre</td>
									<td style="width: 350px;">Description</td>
									<td style="width: 50px;">Note</td>
								</tr>
								<tr style="float: inherit;">									
									<td><h:outputText value="#{pdt.jeu.genre.libelleGenre}" /></td>
									<td><h:outputText value="#{pdt.jeu.description}" /></td>
									<td><h:outputText value="#{pdt.jeu.noteMoyenne}" /></td>
									<td>
									<h:commandButton class="button-afficheDetails" value="Afficher les détails" action="#{ficheJeuMB.afficherJeu}">
											<f:param name="idSelected" value="#{pdt.idProduit}"/>
									</h:commandButton>
									</td>					
								</tr>
							</table>
						</h:form>
						</div>
						</h:column>						
					</h:dataTable>
			<br/>
			<br/>
			<div style="width:49%;float:left;margin-left:1%;">
			<h2 style="text-transform: uppercase;color: #001385;"><img src="../../www/images/icones/icon_Master_Chief_Helmet_96.png" alt="Article populaire" />Article populaire</h2>	
				
					<h:dataTable value="#{homeMB.listeArticle}"
						var="article" border="0" style="width:100%;">
						<h:column>
						<div class="fond" style="width:100%;">
						<h:form>
							<table  style="width:100%">
								<tr style="text-transform: uppercase; font-weight:bold; color:#008580;">
									<td rowspan="2"><img style="border: 1px solid #000;" src="#{article.jeu.imgMinJeu}"/></td>
									<td style="width: 150px;">Nom jeu</td>
									<td style="width: 250px;">Article</td>
								</tr>
								<tr style="float: inherit;">									
									<td><h:outputText value="#{article.jeu.nomJeu}" /></td>
									<td><h:outputText value="#{article.article}" /></td>
								</tr>
							</table>
							</h:form>
							</div>
						</h:column>						
					</h:dataTable>
					</div>
					<div style="width:50%;float:left;">
				<h2 style="text-transform: uppercase;color: #001385;"><img src="../../www/images/icones/icon_Master_Chief_Helmet_96.png" alt="Commentaire populaire" />Commentaire populaire</h2>	
																	
					<h:dataTable value="#{homeMB.listeDernierCommentaire}"
						var="com" border="0" style="width:100%">
						<h:column>
						<div class="fond" style="width:98%;">
						<h:form>
							<table style="width:100%">
								<tr style="text-transform: uppercase; font-weight:bold; color:#008580;">
									<td rowspan="2"><img style="border: 1px solid #000;" src="#{com.jeu.imgMinJeu}"/></td>
									<td style="width: 150px;">Nom jeu</td>
									<td style="width: 200px;">Commentaire</td>
									<td style="width: 10px;">Note</td>
								</tr>
								<tr style="float: inherit;">
									<td><h:outputText value="#{com.jeu.nomJeu}" /></td>
									<td><h:outputText value="#{com.commentaire}" /></td>
									<td><h:outputText value="#{com.note}" /></td>
								</tr>
							</table>
							</h:form>
							</div>
						</h:column>				
					</h:dataTable>
				</div>
			
	</f:view>
	</h:body>
	</h:head>
	</ui:define>
</ui:composition>